import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {  Flex,  Icon,Tabs,WingBlank,ListView,SearchBar,List,InputItem} from 'antd-mobile';
import MyScroll from '../../components/MyScroll/MyScroll';
import { createForm } from 'rc-form';
import MyListView from '../../components/MyListView/MyListView';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import AfterSaleItem from './AfterSaleItem';
import NewAfterSaleItem from './NewAfterSaleItem';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import { goto_search_title, goto_search_body } from "./afterSale.less";
import { div_title, div_active, div_header, listDiv } from "./newAfterSale.less";
const {Item} = List;


class AfterSale extends Component {
    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.orderList = [];
        this.AlloyTouch = null;
        this.state = {
            pageNo: 1,
            dataSource: this.ds.cloneWithRows(this.orderList),
            hasMore: true,
            isLoading: true,
            isInit1: true,
            arr: [],
            value: "",
            show: 0,
        }
    }
    refreshList = ({ pageNo = 1, type = 0, status = 70}) => {
        console.log(type, pageNo, "type.....");
        if (type == 0) {
            console.log('type == 0');
            return this.props.dispatch({type:"orderList/OrderListEFF", obj:{pageNo, status}}).then(result => {
                  this.setState({
                      isLoading: false
                  });

                const {orderList=[]} =this.props.orderList;
                const data = orderList || [];
                      const pageSize = 10;
                      const dataLength = data.length;
                      if (dataLength < pageSize) {
                          this.setState({
                              hasMore: false
                          });
                      }
                      if (this.state.isInit1) {
                          this.orderList = data;
                          this.setState({
                              arr:data
                          })
                      } else {
                          this.orderList =this.state.arr.concat(data)
             // this.orderList = { ...this.state.arr, ...data };
                      }
                      this.setState({
                          pageNo,
                          dataSource: this.ds.cloneWithRows(this.orderList)
                      })

              })
        } else if (type == 1) {
            console.log('type == 1');
            return this.props.dispatch({type:"orderList/ReturnListEFF",obj:{pageNo, type: 2}})
        } else if (type == 2) {
            console.log('type == 2');
            return this.props.dispatch({type:"orderList/ReturnListEFF",obj:{pageNo, type: 1}})
        } else if (type == 3) {
            console.log('type == 3');
            return this.props.dispatch({type:"orderList/RefundListEFF",obj:{pageNo}})
        }
    }
    componentDidMount() {
        var obj = {};
        decodeURIComponent(this.props.location.search).replace(/([^?&=]+)=([^?&=]*)/g, (m, p1, p2) => {
            obj[p1] = p2;
            return m;
        });

        this.refreshList({type: this.props.orderList.active});

        if (obj.type) this.titleClick(obj.type);
    }

    onEndReached = (event) => {
        if (!this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({
            isLoading: true,
            isInit1:false
        });
        let pageNo = this.state.pageNo + 1;
        // orderApi.orderlist({
        //   pageNo,
        //   orderType: this.state.orderType,
        //   status: this.state.status
        // }).then(result => {
        //   if (result.result == 1) {
        //     const data = result.data || [];
        //     const pageSize = 10;
        //     const dataLength = data.length;
        //     let hasMore = true;
        //     if (dataLength < pageSize) {
        //       hasMore = false;
        //     }
        //     this.orderList = [...this.orderList, ...data];
        //     this.setState({
        //       hasMore,
        //       isLoading: false,
        //       pageNo,
        //       dataSource: this.ds.cloneWithRows(this.orderList),
        //     })
        //   }
        // })
//  setTimeout(() => {
        if(!this.state.isInit1){
            this.refreshList({
                pageNo,
                status: this.state.status,
                orderType: this.state.orderType,
            });
        }

//  }, 1000);
    }

    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    onSubmit = (value) => {}

    titleClick = n => {
        const {active} = this.props.orderList;
        if (active == n) return false;
        console.log(n, "触发 titleClick。。。。。。。。。。。。");
        // this.setState({active: n});
        this.props.dispatch({type: "orderList/save", data: {active: n}})
        // 发送请求来换取数据。。。。
        this.refreshList({pageNo: 1, type: n});
        // 将滑动置顶。。。。
        if (this.AlloyTouch) this.AlloyTouch.to(0);
    }

    onDoubleClick = () => {}

    getAlloyTouch = AT => this.AlloyTouch = AT

    refresh = () => {
        console.warn(this.props.orderList.active, 'refresh.........');
        return this.refreshList({pageNo: 1, type: this.props.orderList.active});
    }

    loadMore = () => {
        console.log('loadMore =====>>>>', this.props.orderList.listDataLz.pageNo);
        // return this.props.dispatch({ type: `orderList/${this.props.orderList.active == 1 ? "ReturnListEFF" : this.props.orderList.active == 2 ? "" : "RefundListEFF"}`, obj: { type: this.props.orderList.active, pageNo: this.props.orderList.listDataLz.pageNo + 1 || 1} })
        return this.refreshList({pageNo: this.props.orderList.listDataLz.pageNo + 1 || 1, type: this.props.orderList.active});
    }


    render() {
        const {orderList,filter, hasMore,listShopBarterEntity=[],returnList=[], listLz, active, listDataLz} = this.props.orderList;
        const { getFieldProps } = this.props.form;
        const footer = <div style={{ padding: 30, textAlign: 'center' }}>
            {this.state.isLoading ? '加载中...' : '加载完毕'}
        </div>;
        const {value, dataSource} = this.state;

        // console.log(this.props, value, "this.props");


        console.warn(this.props.orderList.listDataLz, "list..........................");
        return (
            <Flex style={{
                height:"100%"
            }} direction="column" >
                <NavTopBar title="售后管理" isBlack={true} jumpUrl={`/my`} dispatch={this.props.dispatch}/>
                {/* <Flex className={ goto_search_title }>
                    <Icon type='left' style={{ paddingLeft:'0.1rem' }} onClick={() => this.props.router.goBack()}/>
                    <Flex className="search_input">
                        <form action="" onSubmit={ ()=>{ this.onSubmit(value) } }>
                            <input placeholder="商品名称、商品编号、订单编号" autoFocus type="search" value={ value } onChange={this.onChange} />
                        </form>
                        <Icon className="search_icon" style={ value.length > 0 ? { color:"#fff" } : {} } type="search" size="md" />
                    </Flex>
                    {
                        value.length > 0 ?
                            <div className="search_cancelbtn" onClick={ ()=>{ this.onSubmit(value) } }>搜索
                            </div> :
                            <div className="search_cancelbtn" onClick={() => { this.props.dispatch(routerRedux.goBack()); }}>取消
                            </div>
                    }
                </Flex> */}
                <div className={ div_title }>
                    <div onClick={ () => this.titleClick(0) }><span className={ active ? "" : div_active }>申请售后</span></div>
                    <div onClick={ () => this.titleClick(1) }><span className={ active ? div_active : "" }>售后记录</span></div>
                </div>

                {
                    active ? <div className={ div_header }>
                        <div onClick={ () => this.titleClick(1) } className={ active == 1 ? div_active : "" }>退货记录</div>
                        <div onClick={ () => this.titleClick(2) } className={ active == 2 ? div_active : "" }>仅退款记录</div>
                        <div onClick={ () => this.titleClick(3) } className={ active == 3 ? div_active : "" }>换货记录</div>
                    </div> : ""
                }

                {/* <ListView
                    style={{
                        height: '100%',
                        width:"100%",
                        paddingTop: '0.1rem'
                    }}
                    dataSource={this.state.dataSource}
                    renderFooter={()=>footer}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={100}
                    renderRow={(dataItem) => (
                        <AfterSaleItem dataItem={dataItem}></AfterSaleItem>
                    )}>
                </ListView> */}

                {
                    active ?
                    <MyListView
                        // key={ layoutType == true ? 1 : 0 }
                        getAlloyTouch={ this.getAlloyTouch }
                        refresh={ this.refresh }
                        loadMore={ this.loadMore }
                        hasMore={ listDataLz.pageNo * listDataLz.pageSize < listDataLz.totalRows }
                        // itemWrapperClass={ goods_list }
                        // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                        renderItem={(v,i,a)=> {
                            // console.log(v, "数据。。。。。");
                            return <NewAfterSaleItem isReturn={true} key={i} dataItem={v} active={active}></NewAfterSaleItem>
                        }}
                        data={ listLz }>
                    </MyListView>
                    :
                    <div className={ listDiv }>
                        <ListView
                            style={{
                                height: '100%',
                                width:"100%",
                                paddingTop: '0.1rem'
                            }}
                            dataSource={this.state.dataSource}
                            renderFooter={()=>footer}
                            onEndReached={this.onEndReached}
                            onEndReachedThreshold={100}
                            renderRow={(dataItem) => (
                                <AfterSaleItem dataItem={dataItem}></AfterSaleItem>
                            )}>
                        </ListView>
                    </div>
                }

                    {/*<Button style={{borderRadius: '0', backgroundColor: '#c40000', color: '#fff'}} className='progressquery'*/}
                            {/*onClick={() => {*/}
                                {/*this.props.router.push('/progress')*/}
                            {/*}}*/}
                            {/*type='primary'>进度查询</Button>*/}

                {/*<Flex style={{}}>*/}
                    {/*{listShopBarterEntity.map((item,i)=>{*/}
                        {/*return <div key={i} style={{marginBottom:".2rem",backgroundColor:"#fff"}}>*/}
                            {/*<Flex style={{backgroundColor:"#fff",padding:".2rem 0"}} justify="between">*/}
                                {/*<WingBlank>*/}
                                    {/*<div>订单编号 : {item.orderSn}</div>*/}
                                    {/*<div style={{marginTop:".2rem"}}>下单时间 : {item.orderTime}</div>*/}
                                {/*</WingBlank>*/}
                                {/*<WingBlank>*/}
                                    {/*<span style={{color:"#ff0036"}}>完成</span>*/}
                                {/*</WingBlank>*/}
                            {/*</Flex>*/}
                            {/*<WingBlank >*/}
                                {/*<Flex justify="between" key={i} onClick={()=>{*/}
                                    {/*this.props.dispatch(routerRedux.push({*/}
                                        {/*pathname: `/orderDetail/${item.orderId}`,*/}
                                    {/*}));*/}
                                {/*}}>*/}
                                    {/*<Flex>*/}
                                        {/*<img src={"http://testbbc.leimingtech.com"+item.goodsImage} style={{width:"2rem",height:"2rem",marginRight:".2rem"}}/>*/}
                                        {/*<div>*/}
                                            {/*<p style={{lineHeight:".4rem"}}>{item.goodsName}</p>*/}
                                            {/*<p style={{color:"#999"}}>数量 : x{item.goodsNum}</p>*/}
                                        {/*</div>*/}
                                    {/*</Flex>*/}
                                    {/*<Icon type="right" />*/}
                                {/*</Flex>*/}
                            {/*</WingBlank>*/}
                            {/*<Flex style={{backgroundColor:"#fff",padding:".2rem 0"}} justify="end">*/}
                                {/*<WingBlank>*/}
                                    {/*<div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:"45px"}} onClick={()=>{*/}
                                        {/*this.props.dispatch(routerRedux.push({*/}
                                            {/*pathname:`/applyAfterSale/${value.orderId}`*/}
                                        {/*}))*/}
                                    {/*}}>查看进度</div>*/}
                                {/*</WingBlank>*/}
                            {/*</Flex>*/}
                        {/*</div>*/}
                    {/*})}*/}
                {/*</Flex>*/}

            </Flex>
        );
    }
}


export default connect(({ orderList }) => ({ orderList }))(createForm()(AfterSale));
